<template>
  <div class="app-container">
    <el-row :gutter="20">
      <splitpanes
        :horizontal="this.$store.getters.device === 'mobile'"
        class="default-theme"
      >
        <pane size="16" min-size="16">
          <el-card shadow="never">
            <div slot="header">
              <span>{{ bankName }}</span>
            </div>
            <el-tree
              :data="chapterList"
              :props="defaultProps"
              node-key="chapterId"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span v-if="data.parent_id === '0'">
                  第{{ data.sort }}章 · {{ data.chapterName }}
                </span>
                <span v-else>
                  {{ data.sort }} &nbsp;-&nbsp;{{ data.chapterName }}
                </span>
              </span>
            </el-tree>
          </el-card>
        </pane>
        <pane size="84" min-size="65">
          <el-card shadow="never"> {{ datalist }}</el-card>
        </pane>
      </splitpanes>
    </el-row>
  </div>
</template>

<script>
import { Splitpanes, Pane } from "splitpanes";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import "splitpanes/dist/splitpanes.css";
export default {
  name: "Chapter",
  props: {
    chapterList: {
      type: Array,
      default: () => [],
    },
    bankName: {
      type: String,
      default: () => "章节列表",
    },
  },
  components: { Treeselect, Splitpanes, Pane },

  data() {
    return {
      innerList: [],
      defaultProps: {
        children: "children",
        label: "chapterName",
      },
      datalist: "",
    };
  },
  mounted() {},
  created() {},
  watch: {},
  methods: {},
  methods: {
    handleNodeClick(data, node, component) {
      this.datalist = data.chapter_name;
      this.$emit("chapter-change", data);
    },
  },
};
</script>

<style scoped></style>
